<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="cw" uri="/widget-tags"%>
<%@ taglib prefix="tags" tagdir="/WEB-INF/tags" %>
<%@page import="java.util.List"%>
<%@page import="java.util.ArrayList"%>
<%@page import="com.wondersgroup.wssip.tag.check.KeyValue"%>
<%
	List<KeyValue> dyncData = new ArrayList<KeyValue>();
	KeyValue kv0 = new KeyValue();
	kv0.setKey("0");
	kv0.setValue("全选");
	dyncData.add(kv0);
	
	KeyValue kv1 = new KeyValue();
	kv1.setKey("1");
	kv1.setValue("企业养老");
	dyncData.add(kv1);
	
	KeyValue kv2 = new KeyValue();
	kv2.setKey("2");
	kv2.setValue("企业工伤");
	dyncData.add(kv2);
	
	KeyValue kv3 = new KeyValue();
	kv3.setKey("3");
	kv3.setValue("企业生育");
	dyncData.add(kv3);
	
	KeyValue kv4 = new KeyValue();
	kv4.setKey("4");
	kv4.setValue("职业年薪");
	dyncData.add(kv4);
	
	KeyValue kv5 = new KeyValue();
	kv5.setKey("5");
	kv5.setValue("机关养老");
	dyncData.add(kv5);
	
	KeyValue kv6 = new KeyValue();
	kv6.setKey("6");
	kv6.setValue("机关工伤");
	dyncData.add(kv6);
	
	KeyValue kv7 = new KeyValue();
	kv7.setKey("7");
	kv7.setValue("机关生育");
	dyncData.add(kv7);
	request.setAttribute("dyncData",dyncData);
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<title>复选框</title>
		<cw:base></cw:base>
		<script type="text/javascript">
			function hideWalk(){  
				Ext.get('walk').parent().hide();
			}
			
			function showWalk(){  
				Ext.get('walk').parent().show();
			}
			
			function onDisableHobby3() {
				Ext.getCmp('hobby3').childItems.each(function(item){
		            item.disable();
		        });
		    }
		    
		    function onEnableHobby3() {
				Ext.getCmp('hobby3').childItems.each(function(item){
		            item.enable();
		        });
		    }
		</script>
	</head>
	<body>
		<ul>
			<li>
				<b> 多选输入域，通过type=checkbox渲染成多选，通过checkboxGroup设置一组多选 </b>
			</li>
			<li>
				<b> 数据来源：静态数据、远程加载数据（需要设置url） </b>
			</li>
		</ul>
		<br />
		<ul>
			<li>
				本地数据多选框，设置type为checkbox，包含checkbox子标签（子选项不需要设置type，默认为父标签的type）
				<table>
					<tr>
						<td align="right">
							爱好：
						</td>
						<td>
							<cw:checkboxGroup id="hobby1" property="hobby1" type="checkbox" enableTooltip="true" checkAll="true">
								<cw:checkbox text="游泳" inputValue="swim" onCheck="window.alert(this.inputValue)" tooltip="我喜欢游泳"/>
								<cw:checkbox id="walk" text="散步" inputValue="walk" onCheck="if(c==true){window.alert(this.inputValue);}" tooltip="我晚饭后散步"/>
							</cw:checkboxGroup>
						</td>
						<td>
							<cw:button text="隐藏散步选项" onclick="hideWalk()"></cw:button>
						</td>
						<td>
							<cw:button text="显示散步选项" onclick="showWalk()"></cw:button>
						</td>
					</tr>
				</table>
				<br />
			</li>
			<li>
				本地数据多选框，设置type为checkbox，选项数据来源通过dataFields和data设置，dataFields为数据字段名称，data为数据值
				<table>
					<tr>
						<td align="right">
							爱好：
						</td>
						<td>
							<cw:checkboxGroup id="hobby2" property="hobby2" type="checkbox" valueField="code" displayField="text"
								dataFields="['code','text','checked','disabled']" data="[['swim','游泳',true,false],['walk','散步',false,false]]">
							</cw:checkboxGroup>
						</td>
					</tr>
				</table>
				<br />
			</li>
			<li>
				远程数据多选框，设置type为checkbox，设置url为远程加载URL
				<table>
					<tr>
						<td align="right">
							爱好：
						</td>
						<td>
							<cw:checkboxGroup id="hobby3" property="hobby3" type="checkbox" valueField="code" displayField="text" url="${pageContext.request.contextPath}/sample/component/demoform/checkbox.json">
							</cw:checkboxGroup>
						</td>
						<td>
							<cw:button text="禁用" onclick="onDisableHobby3()"></cw:button>
						</td>
						<td>
							<cw:button text="启用" onclick="onEnableHobby3()"></cw:button>
						</td>
					</tr>
				</table>
				<br />
			</li>
			<li>
				远程数据多选框，设置type为checkbox，设置url为远程加载URL
				<cw:form>
				<table>
					<tr>
						<td align="right">
							爱好：
						</td>
						<td>
							<cw:checkboxGroup id="hobby4" property="hobby4" type="checkbox" valueField="code" displayField="text" url="${pageContext.request.contextPath}/demoform/loadCheckBoxData.action">
							</cw:checkboxGroup>
						</td>
					</tr>
					<tr>
						<td align="right">
							保险类型：
						</td>
						<td id="dync_td" width="500">
							<tags:dyncCheckbox id="dync" property="dync" data="${dyncData}" row="5" readOnly="false" value="1,2,5,6" label="保险类型"></tags:dyncCheckbox>
						</td>
					</tr>
				</table>
				</cw:form>
			</li>
		</ul>
		<cw:theme></cw:theme>
		<script type="text/javascript">
			Ext.onReady(function(){
				var dync_td=document.getElementById('dync_td');
				if(dync_td.attachEvent){
					dync_td.attachEvent('onclick',onCheckboxClickFunction_dync);
				}else{
					dync_td.addEventListener("click",onCheckboxClickFunction_dync);
				}
				function onCheckboxClickFunction_dync(event){
					event=event || window.event;
					var target=event.target || event.srcElement;
					if(Ext.getCmp(target.id).readOnly){
						return false;
					}
					
					if(target.id=="dync_0"){
						for(var i=1;i<document.getElementsByName("dync").length;i++){
							document.getElementById("dync_"+i).checked = document.getElementById(target.id).checked;
						}
					}else{
						var flag = true;
						for(var i=1;i<document.getElementsByName("dync").length;i++){
							if(document.getElementById("dync_"+i).checked==false){
								flag = false;
								break;
							}
						}
						document.getElementById("dync_0").checked = flag;
					}
				}
				resetHeight("checkBoxFrame");
			})
		
			function resetHeight(frame) {
				var ifm = parent.document.getElementById(frame);
				var obj = document.body;
				var oStyle = obj.currentStyle? obj.currentStyle : window.getComputedStyle(obj, false);
				var initHeight = parseInt(document.body.clientHeight+parseInt(oStyle["margin-top"])+parseInt(oStyle["margin-bottom"]));
				ifm.height = parseInt(initHeight);
			}
		</script>
	</body>
</html>
